<template>
<div class="news">
  <div class="news_content" >
    <h1>{{newsTitle}}</h1>
    <p class="news_content">{{newsContent}}</p>
  </div>
  <div class="input">
    <el-input
        type="textarea"
        :rows="2"
        autosize
        placeholder="请输入回复"
        v-model="reply_content">
    </el-input>
    <el-input v-model="reply_nickname" style="width:20%"placeholder="请输入回复，默认为匿名"></el-input>
    <el-button type="primary" plain style="margin-top: 5px; margin-left: 30px" @click="reply">回复</el-button>
  </div>
  <div class="news_reply" v-show="load">
  <p>回复列表</p>
    <el-divider class="divider" id="reply_top"></el-divider>
    <comment_data
               :id="item.id"
               :nickname="item.nickname"
               :content="item.content"
               :replyList="item.replyList"
               :time="item.time"
               :indent="item.indent"
               :parentId="item.id"
               v-for="(item,index)  in commentList">
    </comment_data>
  <br>
    <br><br><br><br><br><br><br>
  </div>
</div>
</template>

<script>
/*import commentData from "../../components/commentData";
import createComment from "../../components/commentData";*/
import comment_data from "../../components/comment_data";
import Vuex from 'vuex';
import { mapMutations } from 'vuex'

/*const replyItem = new (Vue.extend(comment_data))(
    {props:
      [
          'id','time','nickname','content'
      ]
    });*/
import Vue from "vue";
export default {

  name: "News",
  components: {
    comment_data,

  },
  mounted() {
    //向后端请求数据,这里假装使用了axios
    /*axios({
      method: 'post',
      url: '/question/get_question_detail?id='+this.$route.query.problemIndex.toString(),
    })
        .then(res => {
          //获取数据
          if(res.data.errcode===0)
          {
            this.inputExample=[res.data.inputExample];
            console.log(res.data);
          }
          else if(res.data.errcode===-2)
          {
            Message.error("查询失败");
          }
          else {
            Message.error("未知错误");
          }
        })
        .catch(function (error) {
          this.$message.error(error);
        })*/
    this.load=false;
    this.newsTitle='腾讯光子工作室群在加州组建新团队：前暴雪成员加入，致力于打造新 RTS 游戏';
    this.newsContent='IT之家 7 月 1 日消息 据外媒 The Verge 报道，腾讯光子工作室群在加州组建新工作室 Uncapped Games，致力于打造一款 PC 平台崭新的 RTS 即时战略游戏。\n' +
        '\n' +
        '新工作室将位于加州的洛杉矶，由暴雪老员工 Jason Hughes 和 David Kim 领导。Hughes 担任工作室的首席制作人，其之前曾参与过《暗黑破坏神 III》和《暗黑破坏神 IV》的制作，而 Kim 担任工作室的首席设计师，其之前曾参与过《星际争霸 2》和《暗黑破坏神 IV》的制作。\n' +
        '\n' +
        '新工作室的重点研发项目是 RTS 即时战略游戏，目标是打造出“下一代伟大的 PC RTS 游戏”。Kim 说：“光子工作室为我们提供了一个很棒的机会，组建一个具有丰富经验的优秀开发者团队，并得到和我们一样热爱并支持 RTS 类型游戏的人士的支持，是我们实现目标的第一大步。”\n' +
        '\n' +
        'IT之家了解到，RTS 类型的游戏很多年以来一直玩家受欢迎，但近些年来随着快节奏、易上手的游戏，特别是手游的兴起，RTS 游戏逐渐没落了，比如《星际争霸》、《星际争霸 2》、《帝国时代》和《命令与征服》等。';
    //评论初始化
    for(let i=0;i<this.listLen;i++)
    {
      if(this.commentDataBase[i].parentId===-1)
      {
        this.commentList.push(this.commentDataBase[i]);
      }
    }
    this.load=true;
  },
  computed:{
    commentDataBase()
    {
      return this.$store.state.commentDB;
    },
    listLen()
    {
      return this.$store.getters.listLen;
    }
/*        listLen:function (){
          if (this.commentList===[])
          return 0;
          else {
            return ((this.commentList).length);
          }
    }*/
  },
  data()
  {
    return{
      commentData:[],
      newsTitle:'',
      newsContent:'',
      load:'true',
      reply_content:'',
      reply_nickname:'',
      replyList:[],
      commentList:[],

    }
  },

  methods:
      {
        ...mapMutations([
          'pushComment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
        ]),
        reply(){
          let date = new Date();
          let dateString = date.getFullYear() + "/" +
              (date.getMonth() + 1) + "/" + date.getDate() +
              "  " + date.getHours() + ":" + date.getMinutes() +
              ":" + date.getSeconds();
          if(this.reply_nickname==='')
          {
            this.reply_nickname='匿名';
          }
          /*axios.post{}*/
          //向后端传输数据，如果数据库写入成功，才进行下面的步骤,
          let commentUnit= {
            id: this.listLen,
            nickname: this.reply_nickname,
            content: this.reply_content,
            replyList: this.replyList,
            time: dateString,
            indent: 0,
            parentId: -1,
          }
/*          console.log(this.replyList);*/
          this.pushComment(commentUnit);
/*          console.log("132465");
          console.log(this.listLen);*/
          this.commentList.push(
              commentUnit
          );
          this.reply_content='';
          this.reply_nickname='';


        },
      }
}
</script>

<style scoped>
.news
{
  margin-right: 5%;
  margin-left: 5%;
  text-align:left;
}

.news_reply
{
  margin-top: 25px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  text-align:left;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.news_content
{
  white-space: pre-wrap;
  font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu,serif;
  font-size:18px;
}
</style>